<template>
    <div class="container">
        <!-- 顶部下载app提示 -->
        <nav class="top">
            <div class="img"></div>
            <div class="font">
                <p>摩点 APP</p>
                <h4>发现新奇好物</h4>
            </div>
            <div class="right">
                <!-- <div class="btn">打开APP</div> -->
                <router-link to="/download" tag="div" class="btn">打开APP</router-link>
                <router-link to="/userInfo" tag="div" class="Sign">
                    <div class="usericon"
                        style="overflow: hidden; margin-left:5px ;width: 40px;height: 40px;border-radius: 50%;"><img
                            style="overflow: hidden;width: 40px;height: 40px;border-radius: 50%;"
                            src="https://s.moimg.net/new/images/headPic.png">
                    </div>
                </router-link>


            </div>
        </nav>
    </div>
</template>

<script>
export default {
    data() {
        return {


        };
    },
}
</script>

<style lang="scss">
.top {
    height: 60px;
    max-width: 750px;
    padding: 0 14px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 99999;

    .img {
        width: 41px;
        height: 41px;
        border-radius: 8px;
        background: url(../assets/img/logo.png)no-repeat center center;
        background-size: 100%;
    }

    .font {
        width: 90px;

        p {
            font-size: 14px;
            font-weight: bold;
        }

        h4 {
            font-size: 11px;
            color: #81878e;
        }
    }

    .right {
        display: flex;

        .btn {
            width: 90px;
            height: 30px;
            line-height: 30px;
            background-color: #00c4a1;
            border: 1px solid rgba(226, 248, 244, 0.8);
            border-radius: 4px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            text-align: center;
        }

        .Sign {
            height: 30px;
            line-height: 30px;
            color: #08c5a2;
            font-size: 14px;
            margin-left: 28px;
        }
    }
}
</style>